<template>
    <div class="shop">
        <my-head title="电商" :back="false" ></my-head>
        <div class="shop-box">
            <div class="sleft">
                <van-sticky :offset-top="46">
                    <van-sidebar v-model="type">
                        <van-sidebar-item :title="l.text" v-for="(l,i) in ntypes" :key='i' :name="i" />
                    </van-sidebar>
                </van-sticky>
            </div>
            <div class="sright">
                <glist :list="goodList" v-if="type==0"></glist>
                <glist :list="goodList.filter(item=>item.type.value==ntypes[type].value ) " v-else></glist>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            type:0
        }
    },
    computed:{
        types(){
            var arr = []
            var obj = {}
            // 去重代码
            for(var i=0;i<this.goodList.length;i++){
                var item = this.goodList[i]
                if(!obj[item.type.text]){
                    obj[item.type.text] = item.type.text
                    arr.push(item.type)
                }
            }
            console.log('arrrrr')
            console.log(arr)
            return arr;
        }
    },
    mounted(){
        this.getGoodList()
        console.log(this.ntypes)
    }
}
</script>

<style lang="scss" scoped>
.shop{
    width:100%;
    height:100vh;
    background: #f4f4f4;
    .shop-box{
        width:100%;
        height:100vh;
        display: flex;
        justify-content: space-between;
        .sleft{
            flex-shrink: 0;
            height:100%;
        }
        .sright{
            // flex:1
            width:300px;
        }
    }

}
</style>